<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FoodKa - Food Ordering, Delivery & Restuarent Template</title>

    <!-- Stylesheet -->
    <link rel="stylesheet" href="static/css/animate.min.css">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/magnific.min.css">
    <link rel="stylesheet" href="static/css/nice-select.min.css">
    <link rel="stylesheet" href="static/css/owl.min.css">
    <link rel="stylesheet" href="static/css/slick-slide.min.css">
    <link rel="stylesheet" href="static/css/fontawesome.min.css">
    <link rel="stylesheet" href="static/css/remixicon.css">
    <link rel="stylesheet" href="static/css/style.css">
    <link rel="stylesheet" href="static/css/responsive.css">
    <link rel="stylesheet" href="static/css/register.css">
    <script src="static/js/jquery-3.3.1.js"></script>
    <script src="static/js/jquery.validate.min.js"></script>
    <script>
        $(function(){
            $("#registButton").click(function (){
                var isPass = $("#registerForm").valid();
                if (!isPass) {
                    return;
                }
                $.post("/travel_war_exploded/user/register",
                    $("#registerForm").serialize(),
                    function(data) {
                        if (data.flag) {
                            // 注册成功 页面跳转
                            location.href = "/travel_war_exploded/register_ok.html";
                        }
                    },
                    "json");
            });
            $("#registerForm").validate({
                rules: {
                    username: {
                        required: true,
                        // 正则表达式
                        checkUsername: true,
                        // 用户名不能重复
                        checkUsernameExists: true
                    },
                    password: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    name: {
                        required: true,
                    },
                    telephone: {
                        required: true,
                        number: true
                    },
                    birthday: {
                        required: true
                    },
                    check: {
                        required: true,
                        // 验证码是否正确
                        checkCode: true,
                    },
                },
                // 校验失败要调用的方法
                errorPlacement: function(){}
            });
            // 判断用户名格式是否规范
            $.validator.addMethod("checkUsername",
                function (value,element,params) {
                    var reg = /^[a-zA-Z_]\w{5,15}$/;
                    return reg.test(value);
                });
            // 判断用户名是否存在
            $.validator.addMethod("checkUsernameExists",
                function (value,element,params) {
                    var isPass = false;
                    $.ajax({
                        async: false,
                        url: "/travel_war_exploded/user/checkUsername",
                        data: {username: value},
                        success: function(data) {
                            isPass = data.flag;
                        },
                        dataType: "json"
                    });
                    return isPass;
                });
            // 判断验证码是否正确
            $.validator.addMethod("checkCode",
                function (value,element,params) {
                    var isPass = false;
                    $.ajax({
                        async: false,
                        url: "/travel_war_exploded/checkCode/checkValue",
                        data: {check: value},
                        success: function(data) {
                            isPass = data.flag;
                        },
                        dataType: "json"
                    });
                    return isPass;
                });
        })

    </script>


    <!--Google Fonts-->
    <link href="static/css/css2.css" rel="stylesheet">


</head>
<body class='sc5'>
<!-- preloader area start -->
<div class="preloader" id="preloader">
    <div class="preloader-inner">
        <div id="wave1">
        </div>
        <div class="spinner">
            <div class="dot1"></div>
            <div class="dot2"></div>
        </div>
    </div>
</div>
<!-- preloader area end -->
<!-- search popup area start -->
<div class="body-overlay" id="body-overlay"></div>
<div class="td-search-popup" id="td-search-popup">
    <form action="index.html" class="search-form">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search.....">
        </div>
        <button type="submit" class="submit-btn"><i class="fa fa-search"></i></button>
    </form>
</div>
<!-- //. search Popup -->

<!-- navbar start -->
<div id="header"></div>
<!-- navbar end -->

<!-- bredcrumb Area Start-->
<section class="breadcrumb-area">
    <div class="banner-bg-img"></div>
    <div class="banner-shape-1"><img src="static/picture/shape-1.png" alt="img"></div>
    <div class="banner-shape-2"><img src="static/picture/shape-2.png" alt="img"></div>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 align-self-center">
                <div class="banner-inner text-center">
                    <h3>Enter your information
                    </h3>
                    <h1>USER REGISTER</h1>
                    <nav aria-label="breadcrumb">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Register</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- bredcrumb Area End -->

<section class="banner-area">
    <div class="banner-bg-img"></div>
    <div class="banner-shape-1"><img src="static/picture/shape-1.png" alt="img"></div>
    <div class="banner-shape-2"><img src="static/picture/shape-2.png" alt="img"></div>
    <div class="rg_layout">
        <div class="rg_form clearfix">
            <div class="rg_form_left">
                <p>新用户注册</p>
            </div>
            <div class="rg_form_center">
                <div id="errorMsg"></div>
                <!--注册表单-->
                <form id="registerForm">
                    <!--提交处理请求的标识符-->
                    <input type="hidden" name="action" value="register">
                    <table style="margin-top: 25px;">
                        <tr>
                            <td class="td_left">
                                <label for="username">用户名</label>
                            </td>
                            <td class="td_right">
                                <input type="text" id="username" name="username" placeholder="请输入账号">
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left">
                                <label for="password">密码</label>
                            </td>
                            <td class="td_right">
                                <input type="text" id="password" name="password" placeholder="请输入密码">
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left">
                                <label for="email">Email</label>
                            </td>
                            <td class="td_right">
                                <input type="text" id="email" name="email" placeholder="请输入Email">
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left">
                                <label for="name">姓名</label>
                            </td>
                            <td class="td_right">
                                <input type="text" id="name" name="name" placeholder="请输入真实姓名">
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left">
                                <label for="telephone">手机号</label>
                            </td>
                            <td class="td_right">
                                <input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left">
                                <label for="sex">性别</label>
                            </td>
                            <td class="td_right gender">
                                <input type="radio" id="sex" name="sex" value="男" checked> 男
                                <input type="radio" name="sex" value="女"> 女
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left">
                                <label for="check">验证码</label>
                            </td>
                            <td class="td_right check">
                                <input type="text" id="check" name="check" class="check">
                                <img src="/travel/check/checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
                                <script type="text/javascript">
                                    //图片点击事件
                                    // function changeCheckCode(img) {
                                    //     img.src="/travel/check/checkCode?"+new Date().getTime();
                                    // }
                                </script>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left">
                            </td>
                            <td class="td_right check">
                                <input id="registButton" type="button" class="submit" value="注册">
                                <span id="msg" style="color: red;"></span>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
<!--            <div class="rg_form_right">-->
<!--                <p>-->
<!--                    已有账号？-->
<!--                    <a href="#">立即登录</a>-->
<!--                </p>-->
<!--            </div>-->
        </div>
    </div>
</section>

<!-- footer area start -->
<div id="footer"></div>
<!-- footer area end -->

<!-- back-to-top end -->
<div class="back-to-top">
    <span class="back-top"><i class="fas fa-angle-double-up"></i></span>
</div>



<!-- all plugins here -->
<script src="static/js/jquery-ui.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/imageloded.min.js"></script>
<script src="static/js/counterup.js"></script>
<script src="static/js/waypoint.js"></script>
<script src="static/js/magnific.min.js"></script>
<script src="static/js/isotope.pkgd.min.js"></script>
<script src="static/js/nice-select.min.js"></script>
<script src="static/js/fontawesome.min.js"></script>
<script src="static/js/owl.min.js"></script>
<script src="static/js/slick-slider.min.js"></script>
<script src="static/js/wow.min.js"></script>
<script src="static/js/tweenmax.min.js"></script>
<!-- main js  -->
<script src="static/js/main.js"></script>
<script type="text/javascript" src="static/js/include.js"></script>
</body>
</html>